<template>
	<view>
		<view>
			<view style="margin-top:80rpx">
				<view @click="maintenanceSkip(item)" v-for="(item,index) in managArr" :key="index"
					:class="[item.title=='最新维修'?'indexManage1':(item.title=='维修处理中'?'indexManage3':'indexManage2')]">
					<view style="margin-left:60rpx">{{item.title}}</view>
					<view class="manageIndexFont">
						<view style="font-size: 36rpx;">{{item.num}}<span
								style="font-size:18rpx;margin-left:20rpx">单</span></view>
						<view class="manageLine" style="margin:30rpx 0rpx;"></view>
						<view style="font-size: 24rpx;">点击查看</view>
					</view>
				</view>
			</view>
			<view class="logoSty"></view>
		</view>
		<!-- <my-bottom :bottomArr="Repbottoms" :topName="title"></my-bottom> -->
	</view>


</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	export default {
		name: 'manangement',
		data() {
			return {
				title: '报修',
				userName: '',
				topName: '首页',
				Repbottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "首页",
						path: '/pages/index/supervisorIndex'
					},

					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "退出",
						path: '/pages/index/login'
					},
				],
				managArr: [{
					title: '最新维修',
					num: 0
				}, {
					title: "维修处理中",
					num: 0
				}, {
					title: "历史维修记录",
					num: 0
				}]

			}
		},
		components: {
			topCom,
			bottomCom
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userRole',
				success: (res) => {
					that.userName = res.data
				}
			})
		},
		mounted() {
			this.getAppRepairCount()
		},
		methods: {
			getAppRepairCount() {
				this.$api.maintenance.getAppRepairCount().then(res => {
					var data = res.data
					this.managArr[0].num = data.newRepairCount
					this.managArr[1].num = data.processCount
					this.managArr[2].num = data.historyCount
					// this.getClassRepairAllCount()
				})
			},
			getClassRepairAllCount() {
				this.$api.maintenance.getClassRepairAllCount().then(res => {
					var data = res.data
					this.managArr[0].num = this.managArr[0].num + data.newRepairCount
					this.managArr[1].num = this.managArr[1].num + data.processCount
					this.managArr[2].num = this.managArr[2].num + data.historyCount

				})
			},
			maintenanceSkip(item) {
				if (item.title == '最新维修') {
					uni.navigateTo({
						url: '/pages/maintenance/newestMaintenanceStatus'
					})
				} else if (item.title == '维修处理中') {
					uni.navigateTo({
						url: '/pages/maintenance/maintenanceIng'
					})
				} else {
					uni.navigateTo({
						url: '/pages/maintenance/maintenanceHistory'
					})
				}
			}
		}
	}
</script>

<style>
	.indexContent {
		/* height: 65vh; */
		/* position: relative; */
	}

	.logoSty {
		position: absolute;
		z-index: 999;
		bottom: 50rpx;
	}

	.manageLine {
		width: 100rpx;
		height: 2rpx;
		border: 1rpx solid white;
		background-color: white;

	}

	.manageIndexFont {
		display: flex;
		text-align: end;
		justify-content: flex-start;
		align-content: flex-end;
		flex-direction: column;
		padding-right: 30rpx;
		padding-top: 30rpx;
	}

	.indexManage3 {
		margin: auto;
		margin-top: 40upx;
		width: 582rpx;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-3.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 32upx;
		background-repeat: no-repeat;
	}

	.indexManage1 {
		margin: auto;
		margin-top: 40upx;
		width: 582rpx;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/t-1.png);
		background-size: 100%;
		background-repeat: no-repeat;
		color: white;
		padding-top: 30upx;
		font-size: 32upx;
		/* opacity: 0.8; */
	}

	.indexManage2 {
		margin: auto;
		margin-top: 40upx;
		width: 582rpx;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-2.png);
		background-size: 100%;
		background-repeat: no-repeat;
		color: white;
		padding-top: 30upx;
		font-size: 32upx;
		/* opacity: 0.8; */
	}
</style>